<!-- @format -->
<script setup>
	import { reactive, ref } from 'vue'
	import { ElMessage } from 'element-plus'
	import { useRouter, useRoute } from 'vue-router'
	import { useUserStore } from '@/stores/user'

	const userStore = useUserStore()

	const router = useRouter()
	const route = useRoute()

	// 表单对象
	const loginForm = reactive({
		username: 'admin',
		password: 'admin'
	})

	// 校验规则
	const loginFormRules = {
		// 用户名的规则
		username: [
			{
				required: true,
				message: '用户名不能为空',
				trigger: 'blur'
			},
			{
				min: 3,
				max: 10,
				message: '用户名长度在3-10之间',
				trigger: 'blur'
			}
		],
		// 密码的规则
		password: [
			{
				required: true,
				message: '密码不能为空',
				trigger: 'blur'
			},
			{
				min: 5,
				max: 20,
				message: '密码长度在5-20之间',
				trigger: 'blur'
			}
		]
	}

	// 用来获取 form 组件的方法
	const loginFormRef = ref(null)

	// 登录
	const onLogin = () => {
		// 整体校验
		loginFormRef.value.validate(async (valid) => {
			if (!valid) return ElMessage.error('用户名或密码不对')

			// 注意：这里必须添加 await 关键字，因为 loginAction 是异步执行的，
			// 并且这个函数内部可能会出错，代码出错了，要借助 try-catch 进行捕获错误，
			// 而try-catch 是无法捕获异步代码的错误，只能捕获同步代码的错误，这里添加
			// await 的目的就是把异步代码你变成同步执行的代码

			try {
				// 把可能出错的代码放在try中执行
				// 一旦try中代码出错了，就会停止try中后续代码的执行，转而执行catch中的代码

				// 发起登录请求
				await userStore.loginAction(loginForm)
				// 成功的提示
				ElMessage.success('登录成功')
				// 跳转到首页: 路由的编程式导航，主动跳转页面

				// 登录成功后：优先跳转到回跳地址；否则跳转到首页
				router.push(route.query.redirectUrl || '/')
			} catch (e) {
				// e：表示此次错误信息，这里的 e 也就是 响应拦截器返回的错误对象，
				// 即就是new Error(message)

				// 错误消息提示
				ElMessage.error(e.message)
			}
		})
	}

	// 取消
	const onCancel = () => {
		// 重置：1. 让数据恢复成默认值  2. 移除校验结果
		loginFormRef.value.resetFields()
	}
</script>

<template>
	<div class="login-box">
		<!-- 卡片组件 -->
		<el-card>
			<!-- 头部 -->
			<template #header>
				<div class="card-header">
					<h2>比特文章管理系统</h2>
				</div>
			</template>
			<!-- 主体：表单 -->
			<el-form
				ref="loginFormRef"
				:model="loginForm"
				:rules="loginFormRules">
				<el-form-item prop="username">
					<el-input
						v-model="loginForm.username"
						type="text"
						clearable
						placeholder="请填写用户名"
						prefix-icon="User" />
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						v-model="loginForm.password"
						type="password"
						clearable
						show-password
						placeholder="请填写密码"
						prefix-icon="Lock" />
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						@click="onLogin"
						>登 录</el-button
					>
					<el-button @click="onCancel">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<style scoped lang="scss">
	.login-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background: url('@/assets/login-bg.svg') center/cover;
		.el-card {
			width: 40vw;
			height: 40vh;
			// :deep(选择器)： scss 样式穿透的语法，什么时候需要用到样式穿透：
			// 1. 当前组件的 style 添加了 scoped
			// 2. 修改的是第三方组件内部元素的样式
			:deep(.el-card__header) {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 70px;
				// 注意：var(css变量)，好处就是利于今后的代码维护和修改
				background: var(--el-color-primary);
				color: #fff;
				h2 {
					font-size: 16px;
					font-weight: 400;
				}
			}
			.el-form {
				padding: 15px 25px;
				.el-form-item:nth-child(2) {
					margin: 40px 0;
				}
				.el-input {
					height: 45px;
				}
				.el-button {
					width: 65px;
					height: 35px;
				}
			}
		}
	}
</style>
